<template>
  <el-card class="recheck-task-card">
    <div class="recheck-task-header">
      <h2 class="recheck-task-title">复审任务管理</h2>
      <div class="filter-container">
        <el-select 
          v-model="status" 
          placeholder="复审状态" 
          class="filter-item">
          <el-option label="所有状态" value="所有状态" />
          <el-option label="待复审" value="0" />
          <el-option label="复审中" value="1" />
          <el-option label="已完成" value="2" />
        </el-select>
        <rip-button 
          @click="handleReset" 
          class="reset-button">
          <el-icon><RefreshLeft /></el-icon> &nbsp;重置
        </rip-button>
        <el-button 
          type="primary" 
          @click="handleQuery" 
          class="query-button">
          <el-icon><Search /></el-icon> &nbsp;查询
        </el-button>
      </div>
    </div>
    
    <page-list
      :tableData="assignmentList"
      :total="total"
      @getPage="getPage"
     
    >
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column label="考试名称" prop="examinationName" min-width="180" show-overflow-tooltip />
      <el-table-column label="学生名字" prop="studentName" width="120" align="center" />
      <el-table-column label="分配时间" prop="assignTime" width="240" align="center" />
      <el-table-column label="复审状态" width="120" align="center">
        <template #default="scope">
          <el-tag 
            v-if="scope.row.recheckStatus === 0" 
            type="warning"
            effect="light"
            class="status-tag pending"
          >
            待复审
          </el-tag>
          <el-tag 
            v-else-if="scope.row.recheckStatus === 1" 
            type="primary"
            effect="light"
            class="status-tag reviewing"
          >
            复审中
          </el-tag>
          <el-tag 
            v-else-if="scope.row.recheckStatus === 2" 
            type="success"
            effect="light"
            class="status-tag completed"
          >
            已完成
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="最后总分" prop="totalScore" width="110" align="center">
        <template #default="scope">
          <span class="score-value" v-if="scope.row.recheckStatus === 2">{{ scope.row.totalScore }}</span>
          <span class="score-pending" v-else>未完成</span>
        </template>
      </el-table-column>
     
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button 
            v-if="scope.row.recheckStatus === 0 || scope.row.recheckStatus === 1" 
            type="primary" 
            size="small" 
            @click="gotoRecheckComponent(scope.row)"
            class="recheck-button"
            plain
          >
            复审
          </el-button>
        </template>
      </el-table-column>
    </page-list>
  </el-card>
</template>

<script setup>
import useRecheckTask from '@/hooks/server/useRecheckTask'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { RefreshLeft, Search } from '@element-plus/icons-vue'

const router = useRouter()

const { 
  assignmentList,
  total,
  page,
  pageSize,
  status,
  getAssignmentListOfHook,
  handleReset,
  handleQuery,

  gotoRecheckComponent
} = useRecheckTask()

const getPage = (pageParams) => {
  page.value = pageParams.page
  pageSize.value = pageParams.pageSize
  getAssignmentListOfHook()
}



onMounted(async () => {
  await getAssignmentListOfHook()
})

</script>

<style scoped lang="scss">
.recheck-task-card {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  margin: 24px;
  transition: all 0.4s ease;
  overflow: hidden;
  background-color: #ffffff;
  
  &:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  }
}

.recheck-task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 24px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 24px;
}

.recheck-task-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  position: relative;
  padding-left: 16px;
  letter-spacing: 0.01em;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 24px;
    background: linear-gradient(45deg, #409EFF, #64B5F6);
    border-radius: 3px;
  }
}

.filter-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.filter-item {
  width: 160px;
  transition: all 0.3s;
  border-radius: 8px;
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
}

.reset-button {
  height: 40px;
  font-weight: 500;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  
  .el-icon {
    margin-right: 4px;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.query-button {
  height: 40px;
  font-weight: 500;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 8px;
  background: linear-gradient(to right, #409EFF, #64B5F6);
  border: none;
  
  .el-icon {
    margin-right: 4px;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
    background: linear-gradient(to right, #3b91ea, #57a8e8);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.recheck-task-table {
  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    
    .el-table__header-wrapper {
      th {
        background: linear-gradient(to right, #f8f9fa, #f5f7fa) !important;
        font-weight: 600;
        font-size: 14px;
        color: #4a5568;
        padding: 12px 0;
        border-bottom: 2px solid #ebeef5;
      }
    }
    
    td {
      padding: 12px 0;
      font-size: 14px;
      border-bottom: 1px solid #ebeef5;
    }
    
    .el-table__row {
      transition: all 0.25s;
      
      &:hover {
        background-color: #f0f7ff !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        z-index: 1;
      }
    }
  }
}

.status-tag {
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  }
  
  &.pending {
    background-color: #fdf6ec;
    color: #e6a23c;
    border-color: #faecd8;
  }
  
  &.reviewing {
    background-color: #ecf5ff;
    color: #409EFF;
    border-color: #d9ecff;
  }
  
  &.completed {
    background-color: #f0f9eb;
    color: #67c23a;
    border-color: #e1f3d8;
  }
}

.score-value {
  font-weight: 600;
  color: #67c23a;
  font-size: 15px;
}

.score-pending {
  color: #909399;
  font-size: 14px;
  font-style: italic;
}

.recheck-button {
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.35s;
  font-size: 0.9rem;
  border-radius: 6px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  

  
  &:active {
    transform: translateY(0);
  }
}

// 响应式优化
@media (max-width: 992px) {
  .recheck-task-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .filter-container {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .filter-item {
    width: 120px;
  }
}

@media (max-width: 768px) {
  .recheck-task-card {
    margin: 16px;
  }
  
  .recheck-task-title {
    font-size: 1.5rem;
  }
}
</style>
